<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="600"
    append-to-body
    show-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="cancelHandle"
  >
    <!-- Form -->
    <Form
      ref="formRef"
      :form="form"
      :config="config"
      :rules="rules"
      :name="name"
      label-width="80"
      width="100%"
      @change="changeHandle"
    >
      <template #type>
        <Select
          v-model="form.type"
          :options="typeList"
          placeholder="请选择分成类型"
          :disabled="true"
          @change="changeTypeHandle"
        />
      </template>
      <template #value>
        <div v-if="form.type === 1" class="share-value">
          <el-input-number v-model="form.value" :controls="false" />
          <span class="share-value__label">元</span>
        </div>
        <div v-else class="share-value">
          <el-input-number
            v-model="form.value"
            :controls="false"
            :min="0"
            :max="100"
          />
          <span class="share-value__label">%</span>
        </div>
      </template>
    </Form>
    <!-- Footer -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelHandle">取消</el-button>
        <el-button type="primary" @click="searchHandle">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
// components
import Form from '@/components/Form/Form.vue'
import Select from '@/components/Select/Select.vue'
// hooks
import useDialog from '@/hooks/useDialog'
import useForm from '@/hooks/useForm'
// others
import { ref, watch } from 'vue'
import { aFormData, aFormConfig, aFormRules, typeList } from './config'
import { ElMessage } from 'element-plus'

// props
const props = defineProps({
  title: {
    type: String,
    default: '新增分成'
  },
  current: {
    type: Object,
    default: () => null
  }
})
// emits
const emit = defineEmits(['confirm'])

// Dialog
const { visible, hide, show } = useDialog()
const confirm = () => {
  hide()
  emit('confirm', form.value)
  ElMessage.success('修改成功')
}
const title = ref('新增分成')

/** Form */
const formRef = ref()
const validateValue = (rule, value, callback) => {
  if (form.value.type === 1 && value === null) {
    callback(new Error('请输入分成金额'))
  } else if (form.value.type === 2 && value === null) {
    callback(new Error('请输入对方占比'))
  } else {
    callback()
  }
}
aFormRules.value = [
  {
    required: true,
    validator: validateValue,
    trigger: ['blur']
  }
]

const { form, config, rules, submitForm, resetForm, setFormConfigItemAttr } =
  useForm({
    formRef,
    formData: aFormData,
    formConfig: aFormConfig,
    formRules: aFormRules
  })
const cancelHandle = () => {
  hide()
  resetForm()
}
const searchHandle = async () => {
  submitForm(() => {
    confirm()
    resetForm()
  })
}

const changeHandle = (value, prop, item) => {
  console.log(111, value, prop, item)
}
const changeTypeHandle = (value) => {
  if (value === 1) {
    setFormConfigItemAttr('value', 'label', '分成金额')
    form.value.value = 0
  } else {
    setFormConfigItemAttr('value', 'label', '分成占比')
    form.value.value = 0
  }
}

/** 初始化 */
watch(
  () => visible.value,
  (val) => {
    if (val) {
      title.value = props.current ? '编辑分成' : '新增分成'
      form.value.name = props.current?.name || ''
      form.value.type = props.current?.type || 1
      changeTypeHandle(form.value.type)
      form.value.value = props.current?.value || 0
    }
  }
)

defineExpose({
  visible,
  hide,
  show
})
</script>

<style lang="less" scoped>
.share-type-container {
  display: flex;
  width: 100%;
  // .el-select {
  //   width: 150px;
  //   flex-grow: 0;
  //   flex-shrink: 1;
  // }
}
.share-value {
  display: flex;
  flex-grow: 1;
  :deep(.el-input__inner) {
    width: 100px;
    flex: 0;
    flex-shrink: 1;
  }
  &__label {
    margin-left: 8px;
  }
}
</style>
